<template>
    <div class="message">
      <!--风险词、同业词、-->
      <div class="sameIndustry">{{$t('xsDetails.riskWord')}}:
        <span v-for="item in riskKeyWordsReturn">
          <button @click="searchWord(item)" class="risk-word" :class="( item !== keyword ? 'colorNormal' : 'colorOrange' )">{{item}}</button>,
        </span>
      </div>
      <div class="sameIndustry">{{$t('xsDetails.sameIndustryWord')}}:
        <span v-for="item in tongyeKeyWordsReturn">
          <button @click="searchWord(item)" class="risk-word" :class="( item !== keyword ? 'colorNormal' : 'colorOrange' )">{{item}}</button>,
        </span>
      </div>
      <!--repayWord-->
      <div class="sameIndustry">{{$t('xsDetails.repayWord')}}:
        <span v-for="item in repaymenKeyWordsReturn">
          <button @click="searchWord(item)" class="risk-word" :class="( item !== keyword ? 'colorNormal' : 'colorOrange' )">{{item}}</button>,
        </span>
        <span style="margin-left: 10px; color: #f00">{{ $t('tel.number') }}：{{ repaymenKeyWordsReturn.length }}</span>
      </div>
      <el-table :data="tableData">
        <el-table-column :label="$t('xsDetails.name')" width="180" prop="name"></el-table-column>
        <el-table-column :label="$t('xsDetails.tel')" width="180" prop="phone"></el-table-column>
        <el-table-column :label="$t('xsDetails.smsContent')" min-width="200" prop="content">
          <template slot-scope="scope">
            <span v-html="scope.row.keyword"></span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('xsDetails.time')" width="180" prop="callTime">
          <template slot-scope="scope">{{ scope.row.callTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column :label="$t('xsDetails.type')" width="80" prop="type">
          <template slot-scope="scope">{{ scope.row.type | switchType }}</template>
        </el-table-column>
      </el-table>
      <div class="smsPagination">
        <el-pagination @current-change="getTableData" :current-page.sync="pagination.currentPage" :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.recordsTotal"></el-pagination>
      </div>
    </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';

  let that = null;

  export default {
    name: 'message',
    components: {
      Pagination
    },
    props: {
      userId: {
        default: ''
      },
      orderId: {
        default: ''
      }
    },
    mixins: [mixin],
    data() {
      return {
        currentPage: 1,
        pagination: {
          recordsTotal: 0,
          currentPage: 1,
          pageSize: 100, // V2.2.1更改为100条
        },
        tableData: [],
        keyword: '',
        dataVal: [],
        riskKeyWordsReturn: [], // 风险词
        tongyeKeyWordsReturn: [], // 同业词
        repaymenKeyWordsReturn: [], // 还款词
      };
    },
    methods: {
      getTableData() {
        if (this.keyword) {
          const params = {
            userId: this.userId,
            keyword: this.keyword,
            page: {
              pageNo: this.pagination.currentPage,
              pageSize: this.pagination.pageSize
            },
          };
          this.$api.audit.getSmsInfoByKeyword(params).then((res) => {
            const { status, data, error } = res;
            if (status === '1' && error === '00000000') {
              this.tableData = data.data;
              const regKey = this.keyword.split('').join('\\s*');
              const reg = new RegExp(`(${regKey})`, 'gi');
              this.tableData.forEach((item) => {
                item.keyword = item.content.replace(reg, '<span style="color: #FF8242;">$1</span>');
              });
              this.pagination.recordsTotal = data.count;
            }
          });
        } else {
          const params = {
            userId: this.userId,
            orderId: this.orderId,
            page: {
              pageNo: this.pagination.currentPage,
              pageSize: this.pagination.pageSize
            },
          };
          this.$api.audit.userSmsMessage(params).then((res) => {
            const { status, data, error } = res;
            if (status === '1' && error === '00000000') {
              this.tableData = data.data;
              if (data.riskKeyWordsReturn) {
                this.riskKeyWordsReturn = data.riskKeyWordsReturn;
              }
              if (data.tongyeKeyWordsReturn) {
                this.tongyeKeyWordsReturn = data.tongyeKeyWordsReturn;
              }
              if (data.repaymenKeyWordsReturn) {
                this.repaymenKeyWordsReturn = data.repaymenKeyWordsReturn;
              }
              data.data.forEach((item) => {
                item.keyword = item.content;
              });
              if (data.page) {
                this.pagination.recordsTotal = data.page.totalRecord;
              }
            }
          });
        }
      },
      searchWord(val) {
        this.pagination.currentPage = 1;
        this.keyword = this.keyword === val ? '' : val;
        this.getTableData();
      },
    },
    filters: {
      switchType(type) {
        switch (+type) {
          case 1:
            return that.$t('xsDetails.reception');
          case 2:
            return that.$t('xsDetails.send');
          default:
            return '';
        }
      }
    },
    created() {
      that = this;
      this.getTableData();
    }
  };
</script>

<style lang="scss" scope>
  .smsPagination {
    float: right;
    padding-bottom: 15px;
  }
  .sameIndustry {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .risk-word {
    background-color: #fff;
    color: #909399;
    border: none;
    padding-right: 0;
  }
  .colorOrange {
    color: #FF8242;
  }
  .colorNormal {
    color: inherit;
  }
</style>
